<!DOCTYPE html>
<html lang="en">
<head th:replace="_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>标签管理</title>
</head>
<body>
<!--    导航-->
    <nav  th:replace="_fragment::menu2(3)" class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary menu">
                <h2 class="ui teal header item">后台管理</h2>
                <a href="#" class="item"><i class=" home icon"></i>博客</a>
                <a href="#" class="item"><i class=" idea icon"></i>标签</a>
                <a href="#" class="active item"><i class=" tags icon"></i>标签</a>
                <div class="right menu">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="https://unsplash.it/100/100?image=1005" crossorigin="ui avatar image">
                            大鱼
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item">发布</a>
                <a href="#" class="active teal item">列表</a>
            </div>

        </div>
    </div>
<!--中间内容-->
    <div class="m-padded-tb-large" style="max-width: 60em;margin: auto;">
        <div class="ui container">
            <table class="ui table">
                <thead>
                    <tr>
                        <th></th>
                        <th>名称</th>
                        <th>操作</th>
                        <th><a href="javascript:insertTag()" class="ui mini basic teal button">新增</a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="tag,iterStat:${tags.getList()}">
                        <td th:text="${iterStat.count}"></td>
                        <td th:text="${tag.getName()}"></td>
                        <td>
                            <a th:href="'javascript:updateTag('+${tag.getId()}+')'" class="ui mini basic teal button">编辑</a>
                            <a th:href="'javascript:deleteTag('+${tag.getId()}+')'" class="ui mini basic red button">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">
                            <div class="ui right floated mini pagination menu">
                                <a th:href="@{/blogstag(pageNum=${tags.getPageNum()-1})}" th:class="${tags.getPageNum()==1 ? 'icon disabled item':'icon item'}" class="icon item">
                                    <i class="left chevron icon"></i>
                                </a>
                                <i th:each="num:${#numbers.sequence(1,tags.getPages())}">
                                    <a th:href="@{/blogstag(pageNum=${num})}" th:class="${num == tags.getPageNum()?'active item':'item'}" class="active item">[[${num}]]</a>
                                </i>
                                <a th:href="@{/blogstag(pageNum=${tags.getPageNum()+1})}" th:class="${tags.getPageNum()==tags.getPages() ? 'icon disabled item':'icon item'}" class="icon item">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>
                        </th>
                    </tr>
                </tfoot>
            </table>
<!--       新增标签     -->
            <div class="ui insert tiny modal">
                <div class="content">
                    <form class="ui form" method="post">
                        <div class="field">
                            <label>新增标签</label>
                            <input type="text" name="tag" id="inserttag" placeholder="请输入标签" required onblur="displayInsertInput()">
                            <p id="insertmsg" class="ui mini negative message" style="display: none">该标签已存在</p>
                        </div>
                        <a href="javascript:insertTagSubmit()" class="ui basic teal button"><i class="checkmark icon"></i>提交</a>
                    </form>
                </div>
                <div class="actions">
                    <div class="ui red cancel inverted button">
                        <i class="remove icon"></i>
                        No
                    </div>
                </div>
            </div>
<!--修改-->
            <div class="ui update tiny modal">
                <div class="content">
                    <form class="ui form" method="post">
                        <div class="field">
                            <label>修改标签</label>
                            <input type="hidden" id="updateId" th:unless="${singletag==null}" th:value="${singletag.getId()}" >
                            <input type="text" name="tag" id="updatetag" placeholder="请输入标签" required th:unless="${singletag==null}" th:value="${singletag.getName()}" onblur="displayInsertInput()">
                            <p id="updatemsg" class="ui mini negative message" style="display: none">该标签已存在</p>
                        </div>
                        <a href="javascript:updateTagSubmit()" class="ui basic teal button"><i class="checkmark icon"></i>提交</a>
                    </form>
                </div>
                <div class="actions">
                    <div class="ui red cancel inverted button">
                        <i class="remove icon"></i>
                        No
                    </div>
                </div>
            </div>
<!--            删除-->
            <div class="ui delete tiny modal">
                <div class="content">
                    <p>确认删除？</p>
                </div>
                <div class="actions">
                    <div class="ui red cancel inverted button">
                        <i class="remove icon"></i>
                        No
                    </div>
                    <div class="ui green ok inverted button">
                        <a href="javascript:deleteTagSubmit()"><i class="checkmark icon"></i>yes</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--底部footer-->
<footer th:replace="_fragment::footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/1.jpg" class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">故事</a>
                    <a href="#" class="item">故事</a>
                    <a href="#" class="item">故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Emile:748835228@qq.com</a>
                    <a href="#" class="item">QQ: 748835228</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p>111111111111111111111111111111</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
    </div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script th:inline="javascript">
    $('.ui.dropdown').dropdown({
        on:'hover'
    });

    let out_pageNum =[[${tags.getPageNum()}]];


    function insertTag(){
        $('.ui.insert.tiny.modal')
            .modal('show')
        ;
    };

    function insertTagSubmit(){
        let tag = {
            "name":$('#inserttag').val(),
        }
        $.ajax({
            url:"/saveTag",
            data:tag,
            type:'post',
            success:function (data){
                if (data) {
                    alert("添加成功");
                    window.location.href = "/blogstag?pageNum=" + out_pageNum;
                }else{
                    $('#insertmsg')[0].style.display="block";
                }
            },
        })
    };


    function displayInsertInput(){
       let val1 = $('#inserttag').val();
       let val2 = $('#updatetag').val();
       if (val1==null || val1==''){
           $('#insertmsg')[0].style.display="none";
       }
        if (val2==null || val2==''){
            $('#updatemsg')[0].style.display="none";
        }
    }



    function updateTag(id){
        $.ajax({
            url:'getTag',
            data:{
                "id":id,
            },
            type:'post',
            success:function (data){
                document.write(data);//data就是异步请求执行Controller后，返回的数据，这里是整个页面（所有标签和数据）
                document.close();//这里需要关闭，不然页面会叠加
                setTimeout(function (){
                    $('.ui.update.tiny.modal')
                        .modal('show');
                },100)
            },
        });

    };

    function updateTagSubmit(){
        let tag = {
            "id":$('#updateId').val(),
            "name":$('#updatetag').val(),
        }
        $.ajax({
            url:"/updateTag",
            data:tag,
            type:'post',
            success:function (data){
                if (data) {
                    alert("修改成功");
                    window.location.href = "/blogstag?pageNum=" + out_pageNum;
                }else{
                    $('#updatemsg')[0].style.display="block";
                }
            },
        });
    };

    let did;
    function deleteTag(id){
        did=id;
        $('.ui.delete.tiny.modal')
            .modal('show');
    };

    function deleteTagSubmit(){
        $.ajax({
            url:"/deleteTag",
            data: {"id":did},
            type:'post',
            success:function (){
                window.location.href="/blogstag?pageNum="+out_pageNum;
            },
        });
    };
</script>
</body>
</html>